<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/testHelper.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
    .test-title {
        background: rgb(0, 112, 6);
        color: #fff;
    }
</style>


<div id="layout0"></div>
<div id="layout1"></div>
<div id="layout2"></div>
<div id="layout3"></div>
<div id="layout4"></div>
<div id="layout5"></div>


<script>
    var arrayRows0 = [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ];

    var arrayRows1 = [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    ];
</script>


<script>
    require(['echarts'], function (echarts) {

        var option = {
            legend: {},
            tooltip: {},
            xAxis: {type: 'category'},
            yAxis: {},
            dataset: {
                source: arrayRows0
            },
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        testHelper.create(echarts, 'layout0', {
            title: '[Default] seriesLayoutBy, enocde, name, head, legend',
            option: option,
            dataTable: arrayRows0
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {

        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: arrayRows0
            },
            xAxis: [
                {type: 'category', gridIndex: 0},
                {type: 'category', gridIndex: 1}
            ],
            yAxis: [
                {gridIndex: 0},
                {gridIndex: 1}
            ],
            grid: [
                {bottom: '55%'},
                {top: '55%'}
            ],
            series: [
                {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
                {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
                {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
            ]
        };

        testHelper.create(echarts, 'layout1', {
            title: 'seriesLayoutBy: "row" and "column" \n[Default] enocde, name, head, legend',
            option: option,
            dataTable: arrayRows0,
            height: 500,
            info: {
                grid: option.grid,
                series: option.series
            }
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {

        var option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: arrayRows1
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        var chart = testHelper.create(echarts, 'layout2', {
            title: 'seriesLayoutBy: row and column, setOption, pie \n [Default] enocde, name, head, legend',
            option: option,
            dataTable: arrayRows1,
            height: 500
        });

        chart && chart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                chart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {

        // Thanks to: https://github.com/lzp4ever
        var option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
            },
            toolbox: {
                top: 25,
                // right: 20,
                feature: {
                    magicType: {
                        type: ['stack', 'tiled']
                    }
                }
            },
            dataset: {
                source: [
                    ['series', '1', '2', '3', '4', '5', '6'],
                    ['a', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['b', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['c', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['d', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
                ],
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            series: [
                {
                    type: 'line',
                    stack: 'sameStack',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    areaStyle: {},
                    label: {show: true}
                },
                {
                    type: 'line',
                    stack: 'sameStack',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    areaStyle: {},
                    label: {show: true}
                },
                {
                    type: 'line',
                    stack: 'sameStack',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    areaStyle: {},
                    label: {show: true}
                },
                {
                    type: 'line',
                    stack: 'sameStack',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    areaStyle: {},
                    label: {show: true}
                },

            ],
        };

        var chart = testHelper.create(echarts, 'layout3', {
            title: 'stack',
            option: option,
            dataTable: option.dataset.source
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {
        var option = {
            dataset: [{
                source: [
                    ['2012-12-12', 323, 11.2],
                    ['2012-12-13', 167, 8.3],
                    ['2012-12-14', 284, 12],
                    ['2012-12-18', 413, 4.1],
                    ['2012-12-19', 287, 13.5]
                ]
            }, {
                source: [
                    [new Date(2012, 11, 12), 323 + 100, 11.2 + 100],
                    [new Date(2012, 11, 13), 167 + 100, 8.3 + 100],
                    [new Date(2012, 11, 14), 284 + 100, 12 + 100],
                    [new Date(2012, 11, 18), 413 + 100, 4.1 + 100],
                    [new Date(2012, 11, 19), 287 + 100, 13.5 + 100]
                ]
            }],
            legend: {},
            xAxis: {
                type: 'time'
            },
            yAxis: {},
            dataZoom: [{
                type: 'slider',
            }, {
                type: 'inside'
            }],
            grid: {
                bottom: 80
            },
            series: [{
                name: 'A1',
                encode: {x: 0, y: 1},
                type: 'line'
            }, {
                name: 'A2',
                encode: {x: 0, y: 2},
                type: 'line'
            }, {
                name: 'B1',
                encode: {x: 0, y: 1},
                datasetIndex: 1,
                type: 'line'
            }, {
                name: 'B2',
                encode: {x: 0, y: 2},
                datasetIndex: 1,
                type: 'line'
            }]
        };

        testHelper.create(echarts, 'layout4', {
            title: 'time axis',
            option: option,
            dataTables: [
                option.dataset[0].source,
                option.dataset[1].source
            ]
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {

        var option = {
            dataset: {
                source: [
                    ['2012-12-12 15:18:09.321', 323, 11.2],
                    ['2012-12-12 15:18:10.432', 167, 8.3],
                    ['2012-12-12 15:18:11.543', 284, 12],
                    ['2012-12-12 15:18:12.654', 413, 4.1],
                    ['2012-12-12 15:18:13.765', 287, 13.5]
                ]
            },
            legend: {},
            xAxis: {
                type: 'time',
                axisLabel: {
                    formatter: function (val) {
                        return echarts.format.formatTime('hh:mm:ss.SSS\nyyyy-MM-dd', val)
                    }
                }
            },
            yAxis: {},
            dataZoom: [{
                type: 'slider',
            }, {
                type: 'inside'
            }],
            grid: {
                bottom: 80
            },
            series: [{
                name: 'A1',
                encode: {x: 0, y: 1},
                label: {
                    show: true,
                    formatter: function (param) {
                        return echarts.format.formatTime('hh:mm:ss.SSS', param.value[0])
                    },
                    textBorderColor: '#fff',
                    textBorderWidth: 3
                },
                type: 'line'
            }, {
                name: 'A2',
                encode: {x: 0, y: 2},
                type: 'line'
            }]
        };

        testHelper.create(echarts, 'layout5', {
            title: 'time axis2',
            option: option,
            dataTable: option.dataset.source
        });
    });
</script>


</body>
</html>
